<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    @cancel="handleCancel"
    :cancelText="$t('systemManagement.close')"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button v-print="'#print-main'">打印</a-button>
      <a-button key="back" @click="handleCancel">{{$t('inPrint.cancel')}}</a-button>
    </template>
    <a-row id="print-main">
      <a-row class="head">
        <a-col :span="24" class="title">Company：{{info.organName}}</a-col>
        <a-col :span="24"  class="title">Store：{{info.number}}</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">From：{{info.depotName}}</a-col>
        <a-col :span="12">To：{{info.checkDepotName}}</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">Transfer：{{info.linkNumber}}</a-col>
        <a-col :span="12">Time：{{getTime()}}</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">Created by：{{userName}}</a-col>
        <a-col :span="12">Date：{{getDate()}}</a-col>
        
      </a-row>
      <a-row >
        <a-col :span="12">Item</a-col>
        <a-col :span="12">Qty</a-col>
      </a-row>
      <a-row class="line">
        <a-row v-for="(item,index) in dataSource" :key="index">
          <a-col>{{item.name}}<span style="padding:0 10px">×</span><span>{{item.standard}}</span></a-col>
          <a-col>
            <a-col :span="6">@</a-col>
            <a-col :span="6">×</a-col>
            <a-col :span="6">{{item.operNumber}}</a-col>
          </a-col>
          <a-col :span="24">{{item.color}}</a-col>
        </a-row>
      </a-row>
      <a-row class="footer">
        <a-col :span="24" class="author">Created by：<span></span></a-col>
        <a-col class="mark" :span="24">Date：<span></span>/<span></span>/<span></span></a-col>

      </a-row>
    </a-row>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  export default {
    name: 'BillPrintIframe',
    data () {
      return {
        title: this.$t('inPrint.triplePreview'),
        width: '600px',
        visible: false,
        billPrintUrl: '',
        height: "",
        model: {},
        form: this.$form.createForm(this),
        loading: false,
        dataSource:[],
        info:{},
        userName:'',
        time:new Date()
      }
    },
    created () {
    },
    methods: {

      getLocalStorage (key) {
      var value = localStorage.getItem(key) // 取回 value 变量
      this.localStorageKeyJson = JSON.parse(value)
      return this.localStorageKeyJson.value
    },
      getTime(){
        console.log(this.time);
        return this.time.getHours() + ':' + this.time.getMinutes() + ':' + this.time.getSeconds()
      },
      getDate(){
        return this.time.getFullYear() + '-' + + this.time.getMonth() + '-'+this.time.getDate()
      },
      show(record, billPrintHeight,dataSource) {
        this.dataSource = dataSource
        this.height = billPrintHeight
        this.info = record
        this.time = new Date()
        this.userName = this.getLocalStorage('pro__Login_Userinfo').username,
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'id'))
        });
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close');
        this.visible = false;
      }
    }
  }
</script>

<style scoped>
.line{
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  display: block;
}
#print-main .ant-col{
  margin-bottom: 10px;
}
#print-main .ant-row{
  padding-top: 10px;
}
.mark span{
  display: inline-block;
  width: 80px;
  border-bottom: 1px dashed #ccc;
  margin-right: 10px;
  margin-left: 10px;
}
.author span{
  display: inline-block;
  width: 360px;
  border-bottom: 1px dashed #ccc;
  margin-right: 10px;
  margin-left: 10px;
}
.title{
  text-align: center;
}
.footer{
  margin-top: 20px;
}
.head{
  border-bottom: 1px dashed #ccc;
  margin-bottom: 20px;
}
</style>